<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="productTemplateExplainEvalList"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        :label="$t('name')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{
            formatDate(scope.row.createdDate)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      append-to-body
      :visible.sync="dialogProductTemplateExplainEvalVisible"
      top="15px"
    >
      <el-form
        v-if="dialogProductTemplateExplainEvalVisible"
        label-width="20%"
        :model="productTemplateExplainEval"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="productTemplateExplainEval.name" />
        </el-form-item>
        <el-form-item :label="$t('language')">
          <el-select v-model="productTemplateExplainEval.language">
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('rule')">
          <el-alert
            :closable="false"
            type="warning"
            title="映射的值自动注入(添加下划线前缀$),全局变量$res保存结果,不要return"
          />
          <el-alert
            :closable="false"
            type="warning"
            title="不支持单引号，请输入双引号"
          />
          <textarea ref="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProductTemplateExplainEvalVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  formatDate,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  listProductTemplateExplainEval,
  updateProductTemplateExplainEval,
  deleteProductTemplateExplainEval,
  insertProductTemplateExplainEval
} from '@/api/iot/iotProductTemplateExplainEvalApi'
import { listEvalLanguage } from '@/api/iot/iotDeviceExplainApi'
// 引入全局实例
import _CodeMirror from 'codemirror'

// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/groovy/groovy'

// 尝试获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirror
export default {
  name: 'ProductTemplateExplainEval',
  props: {
    templateId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      productTemplateExplainEvalList: [],
      productTemplateExplainEval: {},
      dialogProductTemplateExplainEvalVisible: false,
      languageList: [],
      language: null
    }
  },
  created() {
    this.listProductTemplateExplainEval()
    this.listEvalLanguage()
  },
  methods: {
    initEval() {
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, {
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'cobalt',
        // 显示行号
        lineNumbers: true,
        line: true
      })
      // 编辑器赋值
      this.coder.setValue(this.productTemplateExplainEval.eval)

      // 支持双向绑定
      this.coder.on('change', (coder) => {
        this.productTemplateExplainEval.eval = coder.getValue()

        if (this.$emit) {
          this.$emit('input', this.productTemplateExplainEval.eval)
        }
      })
    },
    listEvalLanguage() {
      listEvalLanguage().then(res => {
        const { code, data } = res
        const languageList = []
        if (code === '200') {
          data.forEach(item => {
            languageList.push({
              value: item,
              label: item
            })
          })
        }
        this.languageList = languageList
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.productTemplateExplainEval = {
        templateId: this.templateId,
        eval: ''
      }
      this.dialogProductTemplateExplainEvalVisible = true
      this.$nextTick(() => {
        this.initEval()
      })
    },
    listProductTemplateExplainEval() {
      listProductTemplateExplainEval({
        templateId: this.templateId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productTemplateExplainEvalList = data
        } else {
          this.productTemplateExplainEvalList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.productTemplateExplainEval
      }
      if (!json.templateEvalId) {
        insertProductTemplateExplainEval(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogProductTemplateExplainEvalVisible = false
          }
          this.listProductTemplateExplainEval()
        })
      } else {
        updateProductTemplateExplainEval(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogProductTemplateExplainEvalVisible = false
          }
          this.listProductTemplateExplainEval()
        })
      }
    },
    edit(item) {
      this.productTemplateExplainEval = item
      this.dialogProductTemplateExplainEvalVisible = true
      this.$nextTick(() => {
        this.initEval()
      })
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteProductTemplateExplainEval({
            templateEvalId: item.templateEvalId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listProductTemplateExplainEval()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

<style scoped>

</style>
